<!DOCTYPE html>
<html lang="zn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>初始vue</title>
</head>

<body>
  <!-- 
  1.想让 Vue 工作，就必须创建一个 Vue实例 ，且要传入一个配置对象
  2.root 容器里的代码依然符合 htm1规范 ，只不过混入了一些特殊的 Vue语法
  3.root 容器里的代码被称为 Vue模板
  4.Vue 实例与容器是一一对应的
  5.真实开发中只有一个 Vue实例 ，并且会配合着组件一起使用
  6. {{xxx}} 中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性
  注意区分:js 表达式 和 js代码(语句)
      a.表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方
      1
      a
      a+b
      demo(1)
      x===y?'a':'b'
      b.js代码(语句)
      if(){}
      for(){}
  7.一旦 data 中的数据发生变化，那么模板中用到该数据的地方也会自动更新
  -->

  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>Hello,星期天</h1>
  </div>

  <div id="app">
    {{ message }}
  </div>

  <div class="app">
    {{ message }}
  </div>

  <div class="root">
    <h1>Hello,{{ message }}</h1>
    <h2>Date.now()获取当前时间时间戳,{{Date.now()}}</h2>
    <h3>{{1+1}}</h3>
    <h2>toUpperCase()英文字母转大写,{{address.toUpperCase()}}</h2>
  </div>

  <script>
    Vue.config.productionTip = false  //阻止 vue 在启动时生成生产提示。

    // 创建一个Vue实例
    var app = new Vue({
      el: '#app',//el用于指定于当前Vue实例为哪个容器服务,值为css选择器字符.
      //el:document.getElementById('app'),传统笨重写法
      data: {
        message: 'Hello Word'//data中用于存储数据,数据供el所指定的容器去使用,值我们先写成一个对象.
      }
    })

    var app = new Vue({
      el: '.app',
      data: {
        message: 'Hello Word'
      }
    })

    new Vue({
      el: '.root',
      data: {
        message: '尚硅谷',
        address: 'guangdong'
      }
    })

  </script>
</body>

</html>